    <template>
        <div>
            <div>
                <!-- 类型 -->
                <div class="classify" v-if="classifyIs">
                    <h5>类型</h5>
                    <ul class="classify_list" v-show="change">
                        <li @click="onclass(item.text)" v-for="(item, index) in more" :key="index">{{ item.text }}</li>
                    </ul>
                    <ul class="classify_list" v-show="!change">
                        <li v-for="(item, index) in more" :key="index">
                            <el-checkbox v-model="item.istext" :label="item.text" size="large" />
                        </li>
                    </ul>

                    <el-button style="margin: 17px 0 0 10px;" v-show="change" @click="onchange()"> + 多选</el-button>
                    <span v-show="!change"><el-button style="margin: 17px 0 0 10px;" type="primary"
                            @click="onclass(null)">
                            确定</el-button><el-button style="margin: 17px 0 0 10px;" @click="onchange()">
                            取消</el-button></span>
                </div>
                <!-- 分类 -->
                <div class="classify" v-for="(item, index) in mores" :key="index">
                    <h5>{{ item.h1 }}</h5>
                    <ul class="classify_list">
                        <li @click="onclassidy(item, items)" v-for="(items, index) in item.use" :key="index">{{ items }}</li>
                    </ul>
                </div>
                <!-- 其他 -->
                <div class="classify" v-if="rests.length!==0">
                    <h5>其他</h5>
                    <ul class="classify_list"  v-for="(item, index) in rests" :key="index" :v-if="restsIs">
                        <li class="li_rests"> {{ item.h1 }}<el-icon size="12" color="grey" class="rests_icon">
                                <ArrowUpBold />
                            </el-icon>
                            <div class="rests_box">
                                <span class="span_list" v-for="(items, indexs) in item.use" :key="indexs" @click="onrests(items)">{{ items }}</span>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </template>
    
    <script setup lang="ts">
    import {inject} from 'vue';
    defineProps(['classifyIs','change','more','mores','rests','restsIs']);
    const   onclass = inject('onclass',(a:any)=>{}),
            onclassidy = inject('onclassidy',(a:any,b:string)=>{}),
            onrests = inject('onrests',(a:string)=>{}),
            onchange = inject('onchange',()=>{});
    </script>
    
    <style scoped lang="scss">
    
.classify {
    display: flex;
    align-content: center;
}

.classify_list {
    cursor: pointer;
    padding: 0;
    list-style: none;
    display: flex;
    font-size: 14px;
    line-height: 18px;

    li {
        margin-left: 20px;
        line-height: 35px;
    }

    .rests_icon {
        margin-left: 10px;
    }

    .rests_box {
        display: flex;
        background: #F3F7FF;
        padding: 2px 10px;
        border-radius: 5px;
        z-index: 1000;
        width: 800px;
        // height: 50px;
        transform: scaleY(0);
        transform-origin: top;
        transition: all 0.3s;
        flex-wrap: wrap;
        position: relative;
        z-index: 9999999999;
        .span_list {
            margin-left: 20px;
            background: #F3F7FF;
        }
    }
    .li_rests{
        width: 70px;
        height: 50px;
    }
    .li_rests:hover{
        background: #F3F7FF;
        width: 70px;
        border-radius: 5px 5px 0 0 ;
    }
    .li_rests:hover .rests_box{
        transform: scaleY(1);
        transform-origin: top;
        transition: all 0.3s;    }
    .li_rests:hover .rests_icon{
       transform: rotate(180deg);
    }

}
    
    </style>